<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Semantic UI Form</title>
<!-- Site Properities -->
<link rel="stylesheet" type="text/css" href="../assets/libs/semantic-ui/semantic.min.css">
<script src="../assets/libs/jquery.min.js"></script>
<script src="../assets/libs/semantic-ui/semantic.min.js"></script>
<script type="text/javascript">
$(function(){
	$('button[role="btn-testModal"]').click(function(){
		$('.testModal').modal('show');
	});
	$('#test2').click(function(){
		$('.first.modal')
		  .modal('show');
	});
	// initialize all modals
	$('.coupled.modal')
	  .modal({
		  detachable:false,
		closable:false,
	    allowMultiple: true
	  })
	;
	// open second modal on first modal buttons
	$('.second.modal').modal('attach events', '.first.modal .button:first');
	// show first immediately
	$('.third.modal').modal('attach events', '.second.modal .button[role="btn-testModal"]');
	$('.testModal2.modal').modal('attach events', '.testModal.modal .button[role="testModal2"]');
});
</script>
</head>
<body>
<button role="btn-testModal" class="ui button">模态框</button>
<button id="test2" class="ui button">多级模态框</button>
<div class="ui testModal modal">
  <i class="close icon"></i>
  <div class="header">
    Modal Title
  </div>
  <div class="content">
    <div class="image">
      An image can appear on left or an icon
    </div>
    <div class="description">
      A description can appear on the right
    </div>
  </div>
  <div class="actions">
    <div class="ui button">Cancel</div>
    <div class="ui button">OK</div>
    <button role="testModal2" class="ui button">打开第二层模态框</button>
  </div>
</div>
<div class="ui testModal2 modal">
  <i class="close icon"></i>
  <div class="header">
    Modal Title
  </div>
  <div class="content">
    <div class="image">
      An image can appear on left or an icon
    </div>
    <div class="description">
      A description can appear on the right
    </div>
  </div>
  <div class="actions">
    <div class="ui button">Cancel</div>
    <div class="ui button">OK</div>
  </div>
</div>


<div class="ui first coupled modal">
   <div class="header">模态框 #1 </div>
   <div class="image content">
     <div class="image">
       <i class="right arrow icon"></i>
     </div>
     <div class="description">
       <p>我们还有更多东西想要分享。请跟随我们到第二个模块</p>
     </div>
   </div>
   <div class="actions">
     <div class="ui primary button">继续</div>
     <div role="btn-testModal" class="ui yellow  button ">继续</div>
     <div class="ui approve button"><i class="checkmark icon"></i> All Done </div>
   </div>
 </div>
 
 <div class="ui small second coupled modal">
    <div class="header">模态框 #2 </div>
    <div class="content">
      <div class="description">
        <p>这就是全部内容了！</p>
      </div>
    </div>
    <div class="actions">
      <div class="ui approve button"><i class="checkmark icon"></i> All Done </div>
      <div role="btn-testModal" class="ui yellow  button ">dsdfdfd</div>
    </div>
  </div>
 <div class="ui third coupled modal" style="width: 20%">
    <div class="header">模态框 #3 </div>
    <div class="content">
      <div class="description">
        <p>这就是全部内容了！</p>
      </div>
    </div>
    <div class="actions">
      <div class="ui approve button"><i class="checkmark icon"></i> All Done </div>
    </div>
  </div>
</body>
</html>